<template>
  <div style="margin: 20px">
    <h2>成长历程</h2>
    <!-- <div @blur="editContent"> -->
<tinymce v-model="content" ref="aboutEdit" />
    <!-- </div> -->
    
    <h2>照片墙</h2>


    <div>
      <el-upload
        action="https://yeqt.top:8443/Blog/uploadImg"
        list-type="picture-card"
        :on-success="handleAvatarSuccess"
        name="image"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>


    <div style="margin-top:10px">
        <el-button type="primary" @click="editContent">修改</el-button>
    </div>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import { GET_ABOUT, SET_ABOUT } from "@/api/blog";
export default {
  data() {
    return {
      listLoading: false,
      list: [],
      dialogImageUrl: "",
      dialogVisible: false,
      content:"",
      image:[]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      GET_ABOUT().then((res) => {
        console.log("查询关于", res);
        this.content = res.data.content,
        this.$refs.Tinymce.setContent(res.data.content);
        this.image = rs.data.image
      });
    },
    editContent(){
        console.log("内容",this.content);
        SET_ABOUT({content:this.content,image:this.image}).then(res=>{
            console.log("修改关于",res);
        })
    },
     handleAvatarSuccess(res, file) {
         this.image.push(res.url)
         console.log(this.image);
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  components: {
    Tinymce,
  },
};
</script>